<template>
    <div class="map-container">
        <div ref="chart" style="width: 100%; height: 800px;"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
import jiangxiMap from "../assets/china.json"; // 引入江西省地图数据

export default {
    name: "JiangxiMap",
    data() {
        return {
            myChart: null,
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            // 注册地图
            echarts.registerMap("jiangxi", jiangxiMap);

            // 初始化图表
            this.myChart = echarts.init(this.$refs.chart);

            // 江西省各个市区的经纬度数据
            const cityData = [
                { name: "南昌市", value: [115.8585, 28.6765] },
                { name: "九江市", value: [115.9728, 29.7416] },
                { name: "景德镇市", value: [117.1835, 29.2671] },
                { name: "萍乡市", value: [113.8595, 27.6231] },
                { name: "新余市", value: [114.9295, 27.8196] },
                { name: "赣州市", value: [114.9328, 25.8431] },
                { name: "宜春市", value: [114.3953, 27.8105] },
                { name: "上饶市", value: [117.9235, 28.4453] },
                { name: "吉安市", value: [114.9948, 27.1162] },
                { name: "抚州市", value: [116.3799, 27.9498] },
            ];

            // 地图配置
            const option = {
                title: {
                    text: "中国地图", // 标题文本
                    subtext: '中国地图',
                    left: "center", // 标题位置，水平居中
                    textStyle: {
                        color: "#333", // 标题文字颜色
                        fontSize: 20, // 标题文字大小
                        fontWeight: "bold", // 标题文字粗细
                    },
                },
                series: [
                    {
                        name: "标记",
                        type: "scatter",
                        coordinateSystem: "geo", // 使用地理坐标系
                        roam: false, // 允许缩放和平移
                        data: cityData,
                        symbolSize: 6, // 将标记大小设置为 6（更小）
                        label: {
                            show: true,
                            formatter: "{b}", // 显示城市名称
                            color: "#fff", // 标签文字颜色（白色）
                            fontSize: 12, // 标签文字大小
                        },
                        itemStyle: {
                            color: "#000", // 将标记颜色设置为黑色
                            borderColor: "#000", // 标记边框颜色（黑色）
                            borderWidth: 1, // 标记边框宽度
                        },
                    },
                ],
                geo: {
                    map: "jiangxi",
                    roam: false, // 允许缩放和平移
                    label: {
                        show: true,
                        color: "#fff",
                    },
                    itemStyle: {
                        areaColor: "#007acc",
                        borderColor: "#fff",
                        borderWidth: 1,
                    },
                    emphasis: {
                        label: {
                            show: true,
                            color: "#000", // 高亮时的文字颜色（黑色）
                            fontSize: 12, // 高亮时的文字大小
                        },
                        itemStyle: {
                            areaColor: "#888", // 高亮时的区域颜色（灰色）
                            borderColor: "#fff", // 高亮时的边框颜色
                            borderWidth: 1, // 高亮时的边框宽度
                        },
                    },
                },
            };

            // 设置地图配置
            this.myChart.setOption(option);
        },
    },
};
</script>

<style scoped>
.map-container {
    width: 100%;
    height: 800px;
}
</style>